<!-- //staffid已经存入localsorty，显示密码，查看密码，密码默认*** -->
<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    @close="handleClose"
    :width="[Wwidth > 800 ? '30%' : '80%']"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-width="70px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="员工ID" prop="staffid">
        <el-input v-model="ruleForm.staffid" disabled="true" />
      </el-form-item>
      <el-form-item label="密码" prop="passwords">
        <el-input v-model="ruleForm.passwords" type="password" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { defineEmits, ref, defineProps, watch, toRaw } from 'vue'
import { UserFind } from '@/api/staff'
const emits = defineEmits(['update:modelValue', 'HandleDialog'])
const ruleForm = ref({
  staffid: '',
  passwords: ''
})

const ruleForm1 = ref({
  staffid: '',
  passwords: '',
  email: '',
  positions: ''
})

const initd = () => {
  ruleForm.value.staffid = localStorage.getItem('staffid')
  // console.log('ddddd')
}
initd()

const Wwidth = ref()
const Wheight = ref()
// 我的电脑的浏览器窗口尺寸:宽度：1535;高度：794
const getwindow = () => {
  Wwidth.value = document.documentElement.clientWidth
  Wheight.value = document.documentElement.clientHeight
}
getwindow()

const handleClose = () => {
  emits('update:modelValue', false)
  ruleForm.value.passwords = ''
}
const handleOk = async () => {
  const res = await UserFind(ruleForm.value)
  if (res.staffid !== 0) {
    handleClose()
    emits('HandleDialog', ruleForm1.value)
  } else {
    ElMessage({
      type: 'error',
      message: '验证失败'
    })
  }
}

const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => props.dialogTableValue,
  () => {
    const ValueObj = toRaw(props.dialogTableValue)
    console.log('yijingqidongle')
    console.log(ValueObj)
    ruleForm1.value = props.dialogTableValue
    // console.log(props.dialogTableValue)
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped></style>
